<template>
	<rui-pages>
		<rui-card>
			<view class="login">
				<view class="login_header">
					<view class="login_head_name">
						欢迎登录
					</view>
					<view class="login_head_desc">
						欢迎使用，管理您的设备。
					</view>
				</view>
				<view class="login_form">
					<view class="login_form_item">
						<view class="login_form_item_icon">
							<rui-icons type="user" color="#ccc" size="18"></rui-icons>
						</view>
						<input type="text" class="login_form_item_input" placeholder="请输入用户名" v-model="form.username">
					</view>
					<view class="login_form_item">
						<view class="login_form_item_icon">
							<rui-icons type="pass" color="#ccc" size="18"></rui-icons>
						</view>
						<input password class="login_form_item_input" placeholder="请输入密码" v-model="form.password">
					</view>
					<view class="login_form_item">
						<radio-group @change="expireChange">
							<label class="expire">
								<view class="expire_name">
									会话保持：
								</view>
								<block v-for="(item, index) in expireArr" :key="index">
									<view class="expire_item">
										<radio :value="item.day" :checked="expire == item.day" />{{item.name}}
									</view>
								</block>
							</label>
						</radio-group>
					</view>
				</view>
				<button class="submit" @click="submit">登录</button>
			</view>
		</rui-card>
	</rui-pages>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import UserModel from '@/db/UsersModel';

	let user = new UserModel();
	

	let form = ref({
		username: "qinhai",
		password: "888888" 
	})
	let expire = ref("3")
	let expireArr = [{
			name: "3天",
			day: "3"
		},
		{
			name: "7天",
			day: "7"
		},
		{
			name: "30天",
			day: "30"
		},
		{
			name: "永久",
			day: "0"
		},
	]

	const expireChange = (e) => {
		expire.value = e.detail.value
	}

	const submit = () => {
		if (!form.value.username || !form.value.password) {
			uni.showToast({
				title: "用户名或密码不能为空",
				icon: "none"
			})
			return;
		}
		user.select({
			username: form.value.username
		}).then(u => {
			if (!u || u.username != form.value.username || u.password !== uni.$rui.md5(form.value
					.password)) {
				uni.showToast({
					title: "用户名或密码错误",
					icon: "none"
				})
				return;
			}
			
			let ttl = expire.value == 0 ? "":Number(expire.value) * 86400;
			uni.$rui.cache.put("USER_INFO", {
				id: u.id,
				nickname: u.nickname,
				role: u.role_id,
				ttl
			}, ttl)
			
			uni.showToast({
				title: "登录成功",
				icon: "success"
			})
			
			setTimeout(_ => {
				uni.$rui.route({
					type: "redirectTo",
					url: "pages/index/index"
				})
			}, 1500)
		})

	}
</script>


<style lang="scss">
	.expire {
		display: flex;
		align-items: center;

		&_name {

			font-size: 16px;
		}

		&_item {
			margin-right: 15px;
			display: flex;
			align-items: center;
			font-size: 16px;
		}
	}

	.login {
		position: relative;
		padding: 60px;
		width: 400px;
		margin: 0 auto;

		&_form {
			margin-top: 60px;
			position: relative;
			z-index: 9;

			&_item {
				margin: 20px 0;
				font-size: 28px;
				position: relative;

				&_icon {
					position: absolute;
					top: 5px;
					left: 15px;
				}

				&_input {
					border-radius: 6px;
					background: #fff;
					padding: 15px 25px 15px 40px;
					box-shadow: 0 2px 15px rgba(0, 0, 0, .03);
				}
			}
		}

		&_head {
			&_name {
				font-size: 28px;
				font-weight: bold;
			}

			&_desc {
				font-size: 16px;
				color: #999;
			}
		}
	}



	.submit {
		margin-top: 50px;
		background: var(--color);
		color: #fff;

	}
</style>